<template>
  <div class="container">
    <div class="left">
      <div class="title">个人资料</div>
      <div class="img-container">
        <el-avatar class="img" :size="110" :src="editorFormInfo.adminImg"/>
        <p>修改头像</p>
      </div>
      <div class="desc-list">
        <div class="desc-item">用户名：<span>{{ editorFormInfo.adminName }}</span></div>
        <div class="desc-item">手机号码：<span>{{ editorFormInfo.adminPhone }}</span></div>
        <div class="desc-item">邮箱地址：<span>{{ editorFormInfo.adminEmail }}</span></div>
      </div>
    </div>
    <div class="right">
      <div class="title">基本资料</div>
      <div class="form-container">
        <el-form :model="editorFormInfo" label-width="120px">
          <el-form-item label="头像">
            <el-input v-model="editorFormInfo.adminImg"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="editorFormInfo.adminName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <!--          <el-form-item label="密码">-->
          <!--            <el-input v-model="editorFormInfo.adminPassword" placeholder="请输入密码"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="邮箱">
            <el-input v-model="editorFormInfo.adminEmail" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="editorFormInfo.adminPhone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-form>
        <el-button class="button" @click="sureEditorHandler" icon="finished" color="#1ab394">修改信息</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore"
import {onMounted, reactive} from "vue";
import sysAxios from "@/api/sys.js"

const dataStore = useDataStore()
//初始化编辑对话框状态
//初始化编辑对话框状态
const editorFormInfo = reactive({
  adminId: '',
  adminImg: '',
  adminName: "",
  adminPassword: "",
  adminPhone: "",
  adminEmail: "",
  adminStatus: '',
})
/**
 * 根据id查询后台管理员
 */
const admin_findById = () => {
  sysAxios.admin_findById({
    adminId: dataStore.adminId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.adminId = res.data.data.adminId;
      editorFormInfo.adminName = res.data.data.adminName;
      editorFormInfo.adminPassword = '';
      editorFormInfo.adminEmail = res.data.data.adminEmail;
      editorFormInfo.adminPhone = res.data.data.adminPhone;
      editorFormInfo.adminStatus = res.data.data.adminStatus;
      editorFormInfo.adminImg = res.data.data.adminImg;
    }
  })
}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  sysAxios.admin_update({
    adminId: editorFormInfo.adminId,
    adminName: editorFormInfo.adminName,
    adminEmail: editorFormInfo.adminEmail,
    adminPhone: editorFormInfo.adminPhone,
    adminPassword: editorFormInfo.adminPassword,
    adminStatus: editorFormInfo.adminStatus,
    adminImg: editorFormInfo.adminImg,
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("修改成功")
      admin_findById()
    }
  })
}
onMounted(() => {
  admin_findById()
})
</script>

<style scoped lang="scss">
.container {
  display: flex;
}

.left {
  background-color: #ffffff;
  width: 25%;
  margin: 6px;
  border: 1px solid #d5cece;


  .title {
    background-color: #f0f3f4;
    padding: 10px;

  }

  .img-container {
    text-align: center;
    cursor: pointer;

    .img {
      margin: 15px;
    }

    p {
      color: #1890ff;
    }

  }

  .desc-list {
    padding: 10px;

    .desc-item {
      padding: 10px;
      border-top: 1px solid #d5cece;

      span {
        margin-left: 20px;
      }
    }
  }
}

.right {
  background-color: #ffffff;
  width: 70%;
  margin: 6px;
  border: 1px solid #d5cece;


  .title {
    background-color: #f0f3f4;
    padding: 10px;

  }

  .form-container {
    padding: 40px;
  }

  .button {
    margin-left: 15%;
    color: #ffffff;
  }
}
</style>
